<script lang="ts" setup>
import type { MatchPreviewData } from './types.ts'
import LcuImage from '@/components/lcuImage.vue'
import { getMatchData } from '@/LcuApi/formatMatchData'
import { defineEmits, ref, watch } from 'vue'
import { useI18n } from 'vue-i18n';

const props = defineProps({
  data: {
    type: Object,
    required: true,
  },
})

const emit = defineEmits(['detail'])

const { t } = useI18n()

const matchData = ref<MatchPreviewData>({})
// watch
watch(
  () => props.data.gameId,
  async (newVal) => {
    matchData.value = await getMatchData(props.data)
  },
  { deep: true, immediate: true },
)

function detail() {
  emit('detail', matchData.value)
}
</script>

<template>
  <a-row class="history_preview flex items-center justify-between" @click="detail">
    <a-col :span="12" class="histort_avatar_mode flex items-center">
      <div class="histort_avatar">
        <LcuImage :id="matchData.championId" width="100%" height="100%" type="champion" />
      </div>
      <p class="histort_mode_name">{{ matchData?.queueInfo?.name }}</p>
    </a-col>
    <a-col :span="6" class="histort_result flex justify-center">
      <a-tag v-if="matchData.win" color="arcoblue">
        <template #icon>
          <icon-thumb-up />
        </template>
        {{ t(`HistoryRecord.win`) }}
      </a-tag>
      <a-tag v-else color="red">
        <template #icon>
          <icon-google />
        </template>
        {{ t(`HistoryRecord.lose`) }}
      </a-tag>
    </a-col>
    <a-col :span="5" class="histort_time text-13px opacity-30 text-align-end">{{ matchData.time }}</a-col>
  </a-row>
</template>

<style lang="scss" scoped>
.history_preview {
  padding: 10px 6px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease-in;

  &:hover {
    background-color: var(--module-bg-color);
  }

  .histort_avatar_mode {
    .histort_avatar {
      height: 24px;
      width: 24px;
      border-radius: 999px;
      border: 1px solid #2A7C8C99;
    }

    .histort_mode_name {
      color: #7D7D88;
      font-size: 14px;
      margin-left: 8px;
    }
  }
}
</style>
../../LcuApi/record.js
@/LcuApi/formatMatchData.js
